<template>
    <uni-popup ref="jobPopup" type="bottom">
        <div class="job_popup">
            <div class="title flex">
                <span @click="clearAll" class="w100 flex-center">清空</span>
                <p class="flex-1 flex-center">选择职业</p>
                <span @click="confirmMulPick" class="w100 flex-center" style="color: #002a4f">{{ multiple ? '确定' : '' }}</span>
            </div>
            <div class="job_container">
                <div class="left_type_list">
                    <scroll-view scroll-y>
                        <p v-for="(item, index) in jobList" :key="index" :class="{active: actTypeIndex === index}" @click="actTypeIndex = index">
                            {{item.typeName}}
                            <span v-if="multiple && getSubNum(item) > 0" class="point">{{getSubNum(item)}}</span>
                        </p>
                    </scroll-view>
                </div>
                <scroll-view class="job_list_view" scroll-y>
                    <div class="job_list">
                        <p @click="selectItem(item)"
                            v-for="(item, index) in (jobList[actTypeIndex] && jobList[actTypeIndex].subs || [])" 
                            :class="{active: selectedJobIds.indexOf(item.id) > -1}"
                            :key="index">{{item.typeName}}</p>
                    </div>
                </scroll-view>
            </div>
        </div>
    </uni-popup>
</template>

<script>
import { getPlatTypes } from '@/request/relationship'
export default {
    props: {
        multiple: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            promiseResolve: null,
            actTypeIndex: 0,
            jobList: [],
            selectedJobIds: []
        }
    },
    methods: {
        open(options = {}) {
            return new Promise((resolve, reject) => {
                this.promiseResolve = resolve
                if(options.selected) {
                    this.selectedJobIds =  options.selected.map(i => i.id)
                    console.log(this.selectedJobIds);
                }
                this.getAll()
                this.$refs.jobPopup.open()
            })
        },
        getAll() {
            getPlatTypes().then(res => {
                this.jobList = res.data
            })
        },
        selectItem(item) {
            if(this.multiple) {
                let index = this.selectedJobIds.findIndex(i => i == item.id)
                if(index == -1) {
                    this.selectedJobIds.push(item.id)
                } else {
                    this.selectedJobIds.splice(index, 1)
                }
            } else {
                this.promiseResolve(item)
                this.$refs.jobPopup.close()
            }
        },
        getSubNum(item) {
            let subs = item.subs
            subs = subs.filter(item => this.selectedJobIds.indexOf(item.id) > -1)
            return subs.length
        },
        confirmMulPick() {
            let allJob = []
            this.jobList.forEach(item => {
                allJob.push(...item.subs)
            })
            let selectList = allJob.filter(item => this.selectedJobIds.indexOf(item.id) > -1)
            console.log(selectList);
            this.promiseResolve(selectList)
            this.$refs.jobPopup.close()
        },
        clearAll() {
            if(this.multiple) {
                this.selectedJobIds = []
            } else {
                this.promiseResolve()
                this.$refs.jobPopup.close()
            }
        }
    }

}
</script>

<style lang="less" scoped>
.job_popup{
    width: 100%;
    height: 60vh;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 9999;
    .title{
        flex-shrink: 0;
        width: 100%;
        height: 90rpx;
        border-bottom: 1px solid #ddd;
        span{
            color: #999;
        }
        p{
            font-weight: bold;
        }
    }
    .job_container{
        flex: 1;
        height: 1px;
        display: flex;
        .left_type_list{
            width: 170rpx;
            height: 100%;
            background: #f3f3f3;
            scroll-view{
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            p{
                height: 80rpx;
                text-align: center;
                font-size: 30rpx;
                line-height: 80rpx;
                color: #666;
                position: relative;
                &.active{
                    background: #fff;
                    font-weight: bold;
                }
                .point{
                    position: absolute;
                    right: 5rpx;
                    top: 5rpx;
                    color: #fff;
                    padding: 0 10rpx;
                    height: 32rpx;
                    font-size: 24rpx;
                    border-radius: 16rpx;
                    .align(center);
                    background: #e02e42;
                }
            }
        }
        .job_list_view{
            flex: 1;
            height: 100%;
            background: #fff;
            padding: 30rpx;
            .job_list{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                p{
                    width: 250rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    border: 1px solid #ddd;
                    border-radius: 8rpx;
                    color: #666;
                    margin-bottom: 20rpx;
                    padding: 0 20rpx;
                    .overflow();
                    &.active {
                        border: 1px solid @mainColor;
                        position: relative;
                        &::before{
                            content: "\e780";
                            color: @mainColor;
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 30rpx;
                            height: 30rpx;
                            font-size: 30rpx;
                            line-height: 30rpx;

                        }

                    }
                }
            }
            

        }


    }
}

</style>